Werken met JavaScript: deel 1 


Pep je website op! 


Met html maak je mooie, maar statische websites. Wie het graag wat interactiever ziet, met 


bijvoorbeeld een begroeting aangepast aan het uur of dagelijks een nieuwe wetenswaardig- 


heid, moet andere oplossingen zoeken. JavaScript levert daarbij het voordeel dat het in alle 


browsers weergegeven kan worden, iets wat je niet van iedere taal kan zeggen. 


leiding tot JavaScript en niet tot Java. 
Vaak maken mensen de vergissing 
te geloven dat JavaScript de vereenvou- 


EE het duidelijk zijn: dit is een in- 


digde versie van Java is. Toch hebben bei- 
de programmeertalen niet meer ge- 
meenschappelijk dan de eerste vier let- 
ters van hun naam. JavaScript werd oor- 


Good Morning, Web Surfers! 


Once your site has demonstrated that it's smart enough to tell time, it's only polite to greet your visitors according to 
the time of day. This will not only reflect your proper breeding, it will also enhance the personality of your site 


Note: Be aware that this trick uses JavaScript containing the document write() method, which can create problems on 
pages with nested tables (such as this one). See Charity Kahn's SuperScripfer column for a workaround 


Paste the code below into the <BODY> section of the page you want the greeting to appear on 


<SCRIPT language="javascript"> 


<1 hide javascript 


document. write("<STRONG><FONT size=+2>"} 
day = new Dateí) 
hr = day-getHoursí) 
if ((hr >= 1) && (hr <=5)) { 
t = “Shouldnt you be in bed right now?”;} 
if ((hr >= 6) && (hr <=11)) { 


t = "Good morning!";} 


if ((hr >= 12) && (hr <=16 


t = “Good afternoon!’ 


} 
if ((hr >= 17) && (hr <=21)) { 

t = “Good evening!”;} 
if ((hr == 22) || (hr ==23)) { 

t = “Almost time for bed….”;} 


if (hr==0) { 


t="IEs past midnight….time to call it a night”;} 
document write{t) 
document write{"</FONT></STRONG>"); 


// done hiding — 


</SCRIPT> 


Now your visitors will receive a customized greeting 


Good evening! 


zemen _Sspronkelijk door Netscape ont- 
wikkeld onder de naam LiveScript 
om in 1995 geadopteerd te wor- 
den door Sun die van de object ge- 
oriënteerde programmeertaal een 
succes maakte. Java en JavaScript 
lijken met elkaar verwant doordat 
beide programmeertalen sterk op 
C++ leunen. Deze keuze is bewust 
om zo de primaire doelgroep, pro- 
grammeurs, gemakkelijker over 
te halen van deze talen gebruik te 
maken. Voor JavaScript bestaat 
geen specifiek programma waar- 
in je de code kan wegschrijven en 


Er zijn op internet heel wat bronnen te vinden die je erg gestruc- 
tureerd uitleggen hoe je de aangereikte code moet gebruiken. 


Booleaanse operatoren: Hier maak je gebruik van logische operatoren 
zoals AND, OR of NOT om relaties te bepalen. 


WISKUNDE IN JAVASCRIPT 


(-) 
(—) 
(++) 
(*) 
(/) 
(+) 
(-) 


Negatief 
Increment 
Decrement 
Vermenigvuldigen 
Delen 

Toevoegen 


Aftrekken 
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Vergelijkingen (bijvoorbeeld bij 
de if switch): 

Minder dan 

Meer dan 

Minder dan of gelijk aan 
Groter dan of gelijk aan 
Gelijk aan 

Ongelijk 

Logisch NOT 

Logisch AND 

Logisch OR 
Voorwaardelijk 

Komma 


(<) 
(>) 
(<=) 
(>=) 
(ze 
(l=) 
(1) 
(&&) 
(II) 
(2) 
@ 


C++: Object geörienteerde programmeertaal, ontwikkeld rond 1985. 
Andere object georiënteerde talen zijn Smalltalk, Eiffel en Java. 


Html: Hypertext Markup Language. Een soort computertaal waarmee 
webpagina's worden aangemaakt. 


Html tags: Html tags zijn de commando's die je in een html-editor 
gebruikt om je webpagina vorm te geven. 


Object Georienteerd Programmeren (OOP): In plaats van te werken 
met opdrachten, werk je met objecten die een bepaalde eigenschap heb- 
ben. Een eigenschap van een vierkant is dat het beschikt over vier gelij- 
ke kanten. Objecten kunnen eigenschappen van elkaar erven, waardoor 
code herbruikbaar wordt. Zo kan een rechthoek bijvoorbeeld de rechte 
hoeken van een vierkant erven. 


bewaren. Je kan net zo goed met Micro- 
soft Kladblok als met een html-editor zo- 
als Dreamweaver MX aan de slag gaan. 
Alles hangt een beetje af van waar je het 
script in wil plaatsen: in de webpagina 
zelf of in een afzonderlijke pagina? In het 
eerste geval bewaar je de webpagina zo- 
als je dat gewoon bent met html en werk 
je waarschijnlijk het best in een html-edi- 
tor. Schrijf je de code weg in een afzon- 
derlijk tekstdocument, dan bewaar je het 
met de extensie ‚js en kan je probleem- 
loos Kladblok gebruiken. Toch nog dit: 
hou er rekening mee dat heel wat html- 
editors het resultaat van het JavaScript 
niet in hun previewvenster tonen. Zoek 
je een editor die dat wel doet, maak dan 
gebruik van het gratis First Page 2000 
van EVRSoft [ www.evrsoft.com |. 


Afspraken 


Wanneer je een script schrijft dat je toevoegt aan een be- 

staande html-pagina, plaats je dit tussen html tags: <SCRIPT 
LANGUAGE=“JAVASCRIPT">en </SCRIPT>. Eigenlijk zeg je daarmee: 
begin JavaScript en </script> wil zeggen dat het script hier ge- 
daan is. 

Kies je ervoor de code in een afzonderlijke pagina te plaat- 

sen, dan gebruik je in die afzonderlijke pagina geen html 
tags. In de webpagina waarin je de code wil inschakelen, heb je 
dat al gedaan: <SCRIPT LANGUAGE=“JAVASCRIPT” SRC="BE- 
STAND.JS”> </SCRIPT>. De verwijzing naar ‘bestand.js’ is na- 
tuurlijk de naam van de tekstpagina waarin je het script 
weggeschreven hebt. Dit heeft als voordeel dat de surfer niet 
meteen het script zelf kan opvragen. Toch kan hij er via een om- 
weg wel achterkomen: het script is altijd terug te vinden in het 
geheugen van je browser. 

Plaats JavaScript in een commentaarregel van html. Deze 

begint met <!-- en eindigt met -—>. Een browser geeft de 
commentaarregel niet weer, maar voert de inhoud toch uit. 
Deze werkwijze is optioneel, maar heeft als voordeel dat ook 
de oudere browsers het JavaScript zullen uitvoeren. Alleen wan- 
neer je het script op een afzonderlijke pagina plaatst, is dit niet 
nodig. 

JavaScript maakt onderscheid tussen hoofd- en kleine let- 

ters. X en x zijn twee verschillende waarden. Geef de voor- 
keur aan kleine letters — ook in bestandsnamen. 

Wanneer je een script maakt, weet je perfect wat de be- 

doeling is van ieder stukje code. Wanneer je later aanpas- 
singen wil uitvoeren, is het gemakkelijk als je meteen weet welk 
stuk wat doet. Het is daarom aangewezen alles in kleinere stuk- 
ken op te delen en van een commentaarregel te voorzien waar- 


Basiselementen 


Om JavaScript goed te begrijpen, moet je weten wat er bedoeld 
wordt met constanten, variabelen en expressies. 


Constante 

<SCRIPT LANGUAGE=“JAVASCRIPT"> 
<l 

DOCUMENT. WRITE (“HALLO CLICKX LEZER”); 
=> 

</SCRIPT> 


Dit script toont de tekst ‘Hallo Clickx lezer’ op het scherm. ‘Hallo 
Clickx lezer’ is een constante, omdat deze tekst niet aangepast kan 


VOOR GEVORDERDEN D D 2) 


in je precies aangeeft wat er gebeurt. Commentaar invoegen doe 
je op twee manieren: in één of in meerdere regels. Eén regel be- 
gint met // en hoef je niet af te sluiten. Bij meerdere commen- 
taarregels begin je met /* en sluit je af met */. 

Dit geldt alleen voor deze artikelenreeks: om dit artikel niet 

nodeloos langer te maken, geven we alleen de eerste keer 
de volledige opbouw van een script weer. Daarna krijg je alleen 
de code te zien. Maar vergeet zelf de html tags niet! 


fli www. yahoo[ 1] - Kladblok E „lolx| 


Bestand Bewerken Opmaak Help 


var img=new Image; 
img. srC=‘http://srd. yahoo. com/hp4-err/'+escapela)t', ‘+escapelhb)+', '+esc 
je true; 


window. onerror=err; 
</script> 


<titlezvahoo! </title> 
<meta http-eguiv=" 
<meta http-equiv=" 
<hase href= rh targets 


<script Asha javaans 


var „Hs ‚n= AES 

y=" document. cookie+'; 

if CCb=y. indexof C' v=v Spie Oded = 
hl Là WÀ 


Ook Yahoo gebruikt JavaScript, zoals je kan zien in de bron van 
www.yahoo.com (dit roep je op door te klikken op Beeld — Bron). 


worden door de gebruiker. Aangezien er naast tekst nog andere 
soorten constanten bestaan, wordt er een verder onderscheid ge- 
maakt naar gegevenstype. ‘Hallo Clickx lezer’ noemen we een string- 
constante. Daarnaast heb je nog constanten met getallen en logi- 
sche waarden of Booleaanse operatoren. Opgelet! Tekst plaatsen we 
altijd tussen aanhalingstekens. Het maakt niet uit of je dubbele (*) 
of enkele (°) gebruikt, zolang je maar consequent blijft! Beide vor- 
men mengen is niet toegestaan. Cijfers plaats je niet tussen aan- 
halingstekens. 

Een getalconstante schrijf je zoals je dat gewend bent, behalve 
bij decimale cijfers. Daar mag je géén komma gebruiken, maar 
wel een punt. Je schrijft 1.25 i.p.v. 1,25. 1,25 zal JavaScript na- 
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EN 
UI 


DOESER ZELE 


&) TRAININGTOOLS: Online Training - Netscape 
… File Edit View Go Bookmarks Tools Window Help 


‚QD ob kn 


JE, GAmal kome Mrado Q search | Eookmarts 


TRAINING 


Empowering InterNel 


se: Learning JavaScript WhereWasI?”» 


also start with two slashes // which is the JavaScript code 
for comment. This tells the JavaScript interpreter to ignore 
« Table of Contents that statement. 

« Java Introduction 


en This is a standard way for adding JavaScript to your HTML 


« Objects & Events pages so that it works properly for browsers that are 
« Alerts & Prompts JavaScript enabled and those that do not support 


« Eorm Validation avast 
« Mouse Over FX lavaScnpt. 


« Pop-Up Windove 


- CHAPTER LINKS- 


« Glossary <HTML> 
« Answers <HEAD> 
<TITLE>Web Page containing JavaScript</TITLE> 


Purch: Book 
Ee <SCRIPT LANGUAGE="JAVASCRIPT"> 


« Site License Info 


| <!-- hide JavaScript code from browsers that are not 
« Download Exercises JavaScript enabled 

« Download Course 
“Home GavaScript Statements goes here) 


{lend hiding of JavaScript code --> 


</SCRIPT> 

</HEAD> 

<BODY> 

(HTML document goes here) 
</BODY> 

</HTML> 


We may also put in a single line of code attached to an 
event. Events will be explained later. The general syntax for 
this structure is: 


<HTML_TAG Attibute="option" onEvent="JavaScript code 
statements go here" >stuff in between the opening and 
closing tag</HTML_TAG> 


CBACK JavaScript Syntax: Page 1 of 12 PS NEXT 2 


Schedule a TrainingTools.com Class @ Your Location. Click Here 


S CA A FE) | pocument: Done (0.962 secs) ef | 


Het ziet er moeilijker uit dan het is. Als je de basiselementen kent, 
wordt JavaScript leuk! 


melijk interpreteren als twee getalconstanten, namelijk 1 én 25. 
Bij Booleaanse constanten heb je maar twee keuzen: true of fal- 
se. 


Variabelen 


Variabelen zijn onderhevig zijn aan verandering. De naam van 
een variabele moet bestaan uit een letter (a tot z of A tot Z), een 
dollarteken ($) of een underscore (—_ ). Cijfers mogen NOOIT! 
Geldige waarden zijn dan bijvoorbeeld: clickx, $clickx of _clickx. 
Ongeldig is: 123clickx, #clickx of zelfs _clickxtt. Je moet ook op- 
letten dat variabelen niet gelijk zijn aan woorden die JavaScript 
zelf gebruikt: Zo kan je bijvoorbeeld geen gebruik maken van ‘if. 
Wil je hier toch van gebruikmaken, vervang het dan door if. Ge- 
lukkig is de lengte van de variabele onbelangrijk. Dat betekent 
dat je heel duidelijk kan zijn in je omschrijving. 
NIEUW_UUR=DAY.GETHOURS(); zegt heel wat meer dan 
N_U=DAY.GETHOURS();. Soms zie je in een script ook het woord 
VAR staan, en vervolgens een waarde. Bijvoorbeeld: vAR 
NIEUW_UUR=DAY.GETHOURS();. 

Strikt genomen hoef je het woord var (variabele) niet te schrijven. 
Dit doe je alleen om later duidelijk te maken waar de variabelen 
precies staan. Evenmin moet iedere variabele meteen een waarde 
hebben. Hou er wel rekening mee dat je een ‘waardeloze’ variabe- 
le niet in een bewerking mag gebruiken. Merk op dat iedere varia- 
bele afgesloten wordt met een kommapunt. Wil je meerdere va- 
riabelen achter elkaar plaatsen, scheid die dan met een komma om 
daarna opnieuw te eindigen met een kommapunt. Zoals bijvoor- 
beeld: VAR LEEFTIJD=18, MINIMUM. LEEFTIJD=14, MAXIMUM._LEEF- 
TĲJD=22;. 
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In het begin van dit artikel toonden we een stringconstante op het 
scherm via DOCUMENT.WRITE(). De inhoud van een variabele tonen 
wordt op die wijze moeilijker, juist omdat je nooit op voorhand de 
waarde kan kennen. Daarom kan je ook een variabele zelf ge- 
bruiken. Een voorbeeld maakt het duidelijk: r=“HALLO CLICKX LE- 
ZER” DOCUMENT.WRITE (T);. De letter t is onze variabele, die een 
waarde heeft gekregen: Hallo Clickx lezer. Door de variabele af te 
drukken, kan de inhoud wijzigen en hoeven we ons daar verder 
weinig zorgen over te maken. Merk wel op dat we een variabele 
niet tussen aanhalingstekens plaatsen. Anders maakt JavaScript 
er een string van. 


Script T foe Programmer 


Be Et Ven Go Bookmerks Toos Window Heb 


OAD En 


A value, the data assigned to a vanable, may consist of any sort of data. However, JavaScnpt considers data to fall into 
several possible types Depending on the type of data, certain operabons may or may not be able to be performed on the 
| values For example, vou cannot anthmebcaly multiply two string valves. Vanables can be these types 


Numbers 3 or 7.987, Integer and floating-point numbers. 


« Integers can be positive, 0, or negative; Integers can be expressed in decimal (base 10), 
hevadecimal (base 16), and octal (base 8). A decimal integer teral consists of a sequence 
of digits without a leacang 0 (zero). A leading 0 (zero) on an integer Iteral indicates itis in 
octal. a leading Ox (or OX) indscates hexadecmal Hexadecimal integers can inchude digits 
(0.9) and the letters a-f and A-F. Octal integers can include only the digsts 0-7. 

« A floating-point number can corttain either a decimal point, an "e” (uppercase or 
towercase), which is used to represent "ten to the power of“ in scientific notation, or both, 

part is an "e” or "E” followed by an integer, which can be signed (preceded 


The exponent 
by “+” or "”). A floating-point Kteral must have at least one digit and either a dacimal point 
or "e” (or "E”) 


True or False. The possible Boolean values are true and false These are special values, and are 
not usable as 1 and 0 In a companson, any expression that evaluates to 0 15 taken to be false, 
and any staternent that evakuates to a number other than Ò is taken to be true. 


“Hello World 1" Strings are dekneated by single or double quotation marks. (Use single quotes to 
type strings that contain quotation marks.) 


myObj = new Object(), 
Not the same as zero - no value at all. A null value is one that has no value and means nothing 


A value that 1s undefined 15 a value held by a vanable after it has been created, but before a value 
has been assigned to it 


| That said, JavaScript is a loosely typed language — you do not have to specify the data type of a variable when you declare 
} it, and data types are converted automatically as needed during script execution. By and large, vou may simply assign any 
type of data to any variable. The only time data typing matters ís when you need to perform operations on the data. Certain 
operators behave differently depending on the type of data being deal with For example, consider the + operator 


"5e "10" yields “510” (string concatenation) 
510 ylolds 15 (anthmetic sum) 


Een overzicht van de waarden die een variabele kan bevatten. 


Expressies 


Expressies kan je het best vergelijken met bewerkingen van con- 
stanten en/of variabelen. Bijvoorbeeld: 

VAR X=3, Y=2, SOM=O; 

SOM= X+#Y; 

In de eerste regel kreeg de variabele som de waarde o. In de vol- 
gende regel bepalen we dat soM de waarde krijgt van de optelling 
van de variabelen x en y: 5. Door een kleine ingreep kan je er voor 
zorgen dat er niets opgeteld wordt, maar dat de cijfers na elkaar 
verschijnen: 

VAR X="3", Y=2, SOM=O; 

SOM= X+Y; 

Je maakte van de variabele x een string door aanhalingstekens. Dat 
betekent dat de 3 gewoon weggeschreven wordt. De 2 voegt Java- 
Script er vervolgens gewoon aan toe. Dit betekent dat je pro- 
bleemloos elementen kan combineren. Heeft de bezoeker zijn of 
haar naam al eerder ingegeven, schrijf je dat als volgt weg naar het 
scherm: 

BEZOEKER=“PETER"; 

DOCUMENT. WRITE(“GOEDEMORGEN,” + BEZOEKER); 


NUTTIGE ADRESSEN 


1. First Page 2000 
html.it 


3. Stupid Webtricks 
htt il 


Persoonlijke begroeting 


Wil je je bezoekers persoonlijk begroeten al naargelang het uur waarop ze op je 
website terechtkomen? Met wat je vandaag gezien hebt, kan je volgend script, 
gevonden bij Webtricks, zelf in elkaar steken. Vergeet niet de tags erbij te plaat- 
sen! 

[** SCHRIJF TEKST WEG NAAR HET SCHERM EN GEBRUIK ZELFS PROBLEEMLOOS HTML TAGS 
BINNEN DOCUMENT.WRITE() * 

DOCUMENT. WRITE(“<CENTER><FONT SIZE=+I>"}; 


|| BEPAAL DE VARIABELEN EN HUN WAARDE 
DAY = NEW DATE(); 
HR = DAY.GETHOURs(); 


|| BEPAAL DE EENZIJDIGE SELECTIE 

IF ((HR >= 1) && (HR <=5)) {T = “HOOR Jij NIET IN BED TE LIGGEN?”;} 

IF ((HR >= 6) && (HR <=r1)) {T = “HALLO! Is HET GEEN MOOIE OCHTEND?”;} 

IF ((HR >= 12) && (HR <=16)) {T = “EEN PRETTIGE NAMIDDAG!”;} 

IF ((HR >= 17) && (HR <=21)) {T = “GOEDENAVOND, LIEVE BEZOEKER. ”;} 

IF ((HR == 22) || (HR ==23)) {T = “OEPS... BIJNA TĲD VOOR BED…”;} 

IF (HR==o) {T = “YEP. HET IS VOORBIJ MIDDERNACHT. JE BEDJE VERWACHT jE|”;} 


|| SCHRIJF WEG NAAR HET SCHERM 
DOCUMENT. WRITE(T); 
DOCUMENT. WRITE(“</FONT></CENTER>"); 
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Op deze site werd de boodschap omgezet naar het Nederlands, omdat de doelgroep 
nu eenmaal Vlaamse kinderen zijn. 


IN DE VOLGENDE 
LES GAAN WE VERDER 
MET HERHALINGS- 


— Peter D'Hollander — 


LUSSEN, LOGISCHE 
TESTS EN FUNCTIES. 
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